<template>
	<ComPop
		v-model="show"
		width="800px"
		title="地址簿"
		@saveSubmit="handleConfirm"
	>
		<div class="address-select">
			<!-- 搜索栏 -->
			<div class="search-bar mb-4">
				<el-input
					v-model="searchKeyword"
					placeholder="搜索联系人/电话/地址"
					class="w-full"
				>
					<template #append>
						<el-button @click="handleSearch">
							<el-icon><Search /></el-icon>
						</el-button>
					</template>
				</el-input>
			</div>

			<!-- 地址列表 -->
			<div class="address-list">
				<el-radio-group
					v-model="selectedAddress"
					class="w-full flex address-list-radio"
				>
					<div
						v-for="item in addressList"
						:key="item.id"
						class="address-item w-full mb-3"
					>
						<el-radio :label="item" class="w-full">
							<div class="flex items-center justify-between w-full">
								<div class="flex-1">
									<div class="flex items-center mb-2">
										<span class="font-medium mr-4">{{ item.contact }}</span>
										<span class="text-gray-600">{{ item.phone }}</span>
										<el-tag
											v-if="item.isDefault"
											size="small"
											type="primary"
											class="ml-2"
										>
											默认
										</el-tag>
									</div>
									<div class="text-gray-600">{{ item.detail }}</div>
								</div>
								<div class="actions">
									<el-button type="primary" link @click.stop="handleEdit(item)"
										>编辑</el-button
									>
									<el-button type="danger" link @click.stop="handleDelete(item)"
										>删除</el-button
									>
								</div>
							</div>
						</el-radio>
					</div>
				</el-radio-group>
			</div>

			<!-- 新增地址按钮 -->
			<div class="add-address mt-4">
				<el-button type="primary" @click="handleAdd">
					<el-icon class="mr-1"><Plus /></el-icon>
					新增地址
				</el-button>
			</div>
		</div>
	</ComPop>

	<!-- 新增/编辑地址弹框 -->
	<AddAddress ref="addAddressRef" @saveAddress="handleSaveAddress" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Search, Plus } from '@element-plus/icons-vue';
import AddAddress from './addAddress.vue';

const show = ref(false);
const searchKeyword = ref('');
const selectedAddress = ref('');
const addAddressRef = ref('');

// 模拟地址列表数据
const addressList = ref([
	{
		id: 1,
		contact: '张三',
		phone: '13800138000',
		detail: '四川省成都市高新区天府大道1号',
		isDefault: true,
	},
	{
		id: 2,
		contact: '李四',
		phone: '13800138001',
		detail: '四川省成都市武侯区人民南路四段',
		isDefault: false,
	},
]);

// 搜索
const handleSearch = () => {
	// TODO: 实现搜索功能
	console.log('搜索关键词：', searchKeyword.value);
};

// 新增地址
const handleAdd = () => {
	addAddressRef.value?.open();
};

// 编辑地址
const handleEdit = (item) => {
	addAddressRef.value?.open(item);
};

// 删除地址
const handleDelete = (item) => {
	// TODO: 实现删除功能
	console.log('删除地址：', item);
};

// 保存地址
const handleSaveAddress = (address) => {
	// TODO: 实现保存功能
	console.log('保存地址：', address);
};

// 确认选择
const handleConfirm = () => {
	if (!selectedAddress.value) {
		ElMessage.warning('请选择一个地址');
		return false;
	}
	emit('select', selectedAddress.value);
	show.value = false;
};

const emit = defineEmits(['select']);

// 打开弹框
const open = () => {
	selectedAddress.value = null;
	show.value = true;
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
/*.address-list-radio{
	display
}*/
.address-select {
	.address-item {
		padding: 16px;
		border: 1px solid var(--el-border-color-lighter);
		border-radius: 4px;
		transition: all 0.3s;

		&:hover {
			border-color: var(--el-color-primary);
		}
	}

	:deep(.el-radio) {
		width: 100%;
		margin-right: 0;
		.el-radio__label {
			padding-left: 16px;
			width: calc(100% - 14px);
		}
	}
}
</style>
